<!-- 圆柱形柱状图 -->
<template>
    <div ref="cylinderEchartsRef" style="width: 100%;height: 100%;"></div>
</template>
<script setup>
import { onMounted, ref, watch, getCurrentInstance } from 'vue';
import * as echarts from 'echarts';
import "echarts-gl";
import { getDataZoom } from "./echarts-option";
import tipImage from '../../assets/images/tooltip.png'
import { formatTipVlaue } from '@/utils';
const { proxy } = getCurrentInstance();
const scale = proxy.$scale;

const cylinderEchartsRef = ref();
const props = defineProps({
    xAxisData: {
        type: Object
    },
    yAxisName: {
        type: String
    },
    seriesData: {
        type: Object
    },
    areaColorFrom: {
        type: String
    },
    areaColorTo: {
        type: String
    },
    cylinderWidth: {
        default: '15'//圆柱宽度
    },
    unit: {
        type: String,
        default: '人'
    },
    fixed: {
        type: Number,
        default: 1
    },
    currentStep: {
        default: "0"
    }

});

let myChart = null;
let optionData = props.seriesData;
let dragend = ref(false);
//监听数据变化，可以做更新图标操作
watch(() => props.seriesData, (val, oldVal) => {
    optionData = val;
    if (myChart) {
        setEchartsOption(myChart, optionData);
    }
});
const dataZoomStart = ref(0);
const dataZoomEnd = ref(30);

onMounted(() => {
    myChart = echarts.init(cylinderEchartsRef.value);
    setEchartsOption(myChart, optionData);
    proxy.$bus.on('resize', (res) => {
        myChart.resize();
    })
    myChart.on('dataZoom', function (event) {
        dragend.value = true;
        if (event.batch) {
            dataZoomStart.value = event.batch[0].start;
            dataZoomEnd.value = event.batch[0].end;
        } else {
            dataZoomStart.value = event.start;
            dataZoomEnd.value = event.end;
        };
    });
})
const setEchartsOption = (echart, optionData) => {
    let startIndex = 0;
    if (!dragend.value) {
        optionData.forEach((el, index) => {
            if (el > 0) {
                startIndex = index;
            }
        });
    }
    const option = {
        grid: {
            top: 10,
            left: 10,
            bottom: 0,
            right: '5%',
            containLabel: true,
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            padding: [0, 0, 0, 0],
            axisPointer: {
                lineStyle: {
                    width: 1,
                    type: 'solid',
                    color: '#00D1FF'
                }
            },
            backgroundColor: 'transparent',
            borderColor: 'transparent',
            shadowColor: 'transparent',
            formatter: (val) => {
                let value = formatTipVlaue(val[0].data, props.fixed);
                return `<div style="width:150px;height:55px; background:url(${tipImage}) no-repeat;background-size:contain;padding:5px 10px;">
                              <p style="font-size:12px;color:rgba(214, 243, 255, 0.9);display:flex;align-items: center ;margin-top:0px">
                                <span>${val[0].name} :&nbsp;</span>
                                <span>${value} ${props.unit}</span>   
                              </p>
                              <p style="font-size:12px;color:rgba(214, 243, 255, 0.9);display:flex;align-items: center; margin-top:5px">
                                <span>时间 :&nbsp;</span>
                                <span>第${props.currentStep}秒</span> 
                              </p>
                         </div>`
            },
        },
        animation: false,
        xAxis: [
            {
                show: true,
                type: 'category',
                data: props.xAxisData,
                axisTick: {
                    show: false,// 隐藏X轴刻度线
                },
                axisLine: {
                    show: false,// 隐藏X轴主轴线
                },
                axisLabel: {//设置X轴文本
                    color: '#CFE7FA',
                    margin: 20 * scale,
                    fontSize: 24 * scale
                },
                interval: 1,
            },
        ],
        yAxis: [{
            interval: 100000,
            showMinLabel: true,
            showMaxLabel: true,
            splitLine: {
                lineStyle: {
                    color: 'rgba(87, 206, 234, 0.1)',//设置横线颜色，透明度0.1
                    type: 'solid'
                }
            },
            axisTick: {
                show: false// 隐藏Y轴刻度线
            },
            axisLine: {
                show: false// 隐藏Y轴主轴线
            },
            axisLabel: {
                color: '#CFE7FA',
                fontSize: 24 * scale
            }
        }],
        dataZoom: {
            type: 'slider',//slider
            showDetail: false,
            orient: 'horizontal',
            bottom: 30 * scale,
            show: true,
            brushSelect: false, // 是否开启刷选功能  false-表示不能改变滚动条长度 默认true
            //数据窗口范围的起始数值和结束数值
            startValue: startIndex,
            endValue: startIndex + 8,
            handleSize: 0,
            moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
            fillerColor: '#1FDE95', //选中的滑动条区域的颜色
            borderColor: 'transparent',
            backgroundColor: '#CFE7FA',   //两边未选中的滑动条区域的颜色
            height: 12 * scale,//自定义宽高
        },
        series: [],
    };
    let series = [
        {
            type: 'bar',
            barWidth: 24 * scale,
            itemStyle: {
                opacity: 1,
                color: function (params) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [
                            { offset: 0, color: '#0EB28E' },
                            { offset: 1, color: '#1FDE95' },
                        ],
                        false
                    );
                },
            },
            data: optionData,
        },
    ];
    option.series = series;
    if (dragend.value) {
        option.dataZoom.start = dataZoomStart.value;
        option.dataZoom.end = dataZoomEnd.value;
    }
    echart.setOption(option);

}

</script>
<style scoped></style>